<template>
  <!-- 目前只有询单详情的批量新建在使用：2020-09-11 -->
  <div class="client-info">
    <Title :title="title"/>
    <div class="client-form">
      <el-form
        ref="clientForm"
        :model="clientForm"
        :rules="clientRules"
        :disabled="disabledTaxAmount"
        class="edit-client el-form-box-left"
        label-position="left"
        label-width="100px">
        <div v-if="!isClientDisabled">
          <el-form-item label="客户名称" prop="clientName">
            <el-select
              v-model="clientForm.clientName"
              :remote-method="searchClientName"
              :loading="loading1"
              class="filterableSelect remoteRequestClient"
              popper-class="global-select-down"
              filterable
              remote
              placeholder="搜索匹配"
              size="small"
              @change="clientSelect">
              <el-option
                v-for="item in clientNameOp"
                :key="item.id"
                :label="item.value"
                :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item label="客户联系人" prop="contactPerson">
            <el-select
              v-model="clientForm.contactPerson"
              :remote-method="searchContactPerson"
              :loading="loading2"
              popper-class="global-select-down"
              class="filterableSelect remoteRequest2"
              filterable
              remote
              placeholder="搜索匹配"
              size="small"
              @change="contactSelect">
              <el-option
                v-for="item in personList"
                :key="item.id"
                :label="item.value"
                :value="item.id"/>
            </el-select>
          </el-form-item>
        </div>
        <div :class="{'form-item-right': !isClientDisabled}">
          <el-form-item label="销售" prop="market">
            <el-select
              :disabled="isOtherInfoDisabled"
              v-model="clientForm.market"
              :remote-method="searchMarket"
              :loading="loading3"
              popper-class="global-select-down"
              class="filterableSelect remoteRequest3"
              filterable
              remote
              placeholder="请输入销售名称可快速查找"
              size="small"
              @change="marketSelect">
              <el-option
                v-for="item in marketInfo"
                :key="item.id"
                :label="item.value"
                :value="item"/>
            </el-select>
          </el-form-item>
          <el-form-item label="策划执行人" prop="mastermind">
            <el-select
              :disabled="isOtherInfoDisabled"
              v-model="clientForm.mastermind"
              :remote-method="searchMastermind"
              :loading="loading4"
              popper-class="global-select-down"
              class="filterableSelect remoteRequest4"
              filterable
              remote
              placeholder="请输入该订单负责的博主或策划人"
              size="small"
              clearable
              @change="mastermindSelect">
              <el-option
                v-for="item in marketmindInfo"
                :key="item.id"
                :label="item.value"
                :value="item"/>
            </el-select>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import Title from '@/components/Title';
import {
  getClientName,
  getMarket,
  getContact
} from '@/api/select';
export default {
  name: 'ClientInfo',
  components: { Title },
  props: {
    isClientDisabled: {
      type: Boolean,
      default: false
    },
    isOtherInfoDisabled: {
      type: Boolean,
      default: false
    },
    disabledTaxAmount: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      title: '客户信息',
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      clientForm: {
        clientName: '',
        contactPerson: '',
        market: '',
        mastermind: ''
      },
      clientRules: {
        // clientName: [{ required: true, trigger: 'change', message: '请填写客户名称' }],
        market: [{ required: true, trigger: 'change', message: '请填写销售名称' }]
        // contactPerson: [{ required: true, trigger: 'change', message: '请填写联系人名称' }]
      },
      clientNameOp: [],
      marketInfo: [],
      personList: [],
      marketmindInfo: [],
      clientInfo: {
        clientId: null,
        contactPersonId: null,
        mastermindId: null,
        marketId: null
      }
    };
  },
  created() {
    this.init();
    if (!this.isClientDisabled) {
      this.clientRules = {
        clientName: [{ required: true, trigger: 'change', message: '请填写客户名称' }],
        market: [{ required: true, trigger: 'change', message: '请填写销售名称' }],
        contactPerson: [{ required: true, trigger: 'change', message: '请填写联系人名称' }]
      };
    } else {
      this.clientRules = {
        market: [{ required: true, trigger: 'change', message: '请填写销售名称' }]
      };
    }
  },
  mounted() {
    window.remoteRequest('.remoteRequestClient', this.clientNameList);
    window.remoteRequest('.remoteRequest2', this.searchContactPerson);
    window.remoteRequest('.remoteRequest3', this.searchMarket);
    window.remoteRequest('.remoteRequest4', this.searchMastermind);
  },
  methods: {
    init() {
      this.clientNameList();
      this.masketList('');
      this.masketList('', 1);
    },
    // 获取客户名称列表
    clientNameList(query = null) {
      this.loading1 = true;
      const param = {
        clientName: query,
        isGetMengliClient: false
      };
      getClientName(param).then(res => {
        this.loading1 = false;
        this.clientNameOp = res.data;
      }, result => {
        this.loading1 = false;
        // this.$message.error(result.message);
      });
    },
    // 获取销售人/策划执行人的列表
    masketList(query = null, isMasket = 0) { // isMasket： 0为销售人， 1为策划执行人
      this.loading4 = true;
      getMarket(query).then(res => {
        this.loading4 = false;
        isMasket ? this.marketmindInfo = res.data : this.marketInfo = res.data;
      }, result => {
        this.loading4 = false;
        // this.$message.error(result.message);
      });
    },
    // 获取联系人列表
    contactList(query = null) {
      // if (!this.clientInfo.clientId) return false;
      this.loading2 = true;
      getContact(this.clientInfo.clientId, query).then(res => {
        this.loading2 = false;
        this.personList = res.data;
      }, result => {
        this.loading2 = false;
        // this.$message.error(result.message);
      });
    },
    // 列表的加载状态
    search(query, array) {
      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
        }, 200);
      } else {
        array = [];
      }
    },
    // 查询客户名称列表
    searchClientName(query) {
      this.clientNameList(query);
      // this.search(query, this.clientName);
    },
    clientSelect(item) {
      this.clientInfo.clientId = item;
      this.contactList();
    },
    // 查询联系人列表
    searchContactPerson(query) {
      this.contactList(query);
      // this.search(query, this.personList);
    },
    contactSelect(item) {
      this.clientInfo.contactPersonId = item;
    },
    // 查询销售列表
    searchMarket(query) {
      this.masketList(query);
      // this.search(query, this.marketInfo);
    },
    marketSelect(item) {
      this.clientInfo.marketId = item.id;
    },
    // 查询策划人列表
    searchMastermind(query) {
      this.masketList(query, 1);
      // this.search(query, this.marketmindInfo);
    },
    mastermindSelect(item) {
      this.clientInfo.mastermindId = item.id;
    }
  }
};
</script>
<style lang="scss" scoped>
  .client-info {
    width: 34%;
    // max-height: 692px;
    background: #fff;
    border-radius: 12px;
    box-shadow:2px 4px 13px 0px rgba(221,225,234,1);
    padding: 32px 0 0 32px;
    .client-form {
      margin-top: 32px;
    }
  }
  @media screen and (max-width: 1919px) and (min-width: 1600px) {
    .client-info {
      width: 30.7%;
    }
  }
  @media screen and (max-width: 1599px) {
    .client-info {
      width: 100%;
      max-height: 220px;
      .edit-client {
        display: flex;
        .form-item-right {
          margin-left: 15%;
        }
      }
    }
  }
</style>
